import React from 'react';
import TimelineChart from './TimelineChart';
import CandlestickChart from './CandlestickChart';
import '../styles/MarketChart.css';

/**
 * 市场图表组件 - 整合分时图和K线图
 * @param {Object} props
 * @param {string} props.chartType - 图表类型: 'today', '5day', 'day', 'week', 'month'
 * @param {Object} props.timelineData - 分时图数据
 * @param {Array} props.candlestickData - K线图数据
 * @param {Array} props.candlestickDates - K线图日期
 * @param {Function} props.onChartTypeChange - 图表类型切换回调
 * @param {number} props.height - 图表高度
 */
const MarketChart = ({ 
  chartType, 
  timelineData, 
  candlestickData, 
  candlestickDates, 
  onChartTypeChange,
  height = 450
}) => {
  return (
    <div className="market-chart">
      <div className="chart-tabs">
        <button 
          className={`chart-tab ${chartType === 'today' ? 'active' : ''}`}
          onClick={() => onChartTypeChange('today')}
        >
          分时
        </button>
        <button 
          className={`chart-tab ${chartType === '5day' ? 'active' : ''}`}
          onClick={() => onChartTypeChange('5day')}
        >
          5日
        </button>
        <button 
          className={`chart-tab ${chartType === 'day' ? 'active' : ''}`}
          onClick={() => onChartTypeChange('day')}
        >
          日K
        </button>
        <button 
          className={`chart-tab ${chartType === 'week' ? 'active' : ''}`}
          onClick={() => onChartTypeChange('week')}
        >
          周K
        </button>
        <button 
          className={`chart-tab ${chartType === 'month' ? 'active' : ''}`}
          onClick={() => onChartTypeChange('month')}
        >
          月K
        </button>
      </div>
      <div className="chart-container">
        <div className="chart-wrapper">
          {(chartType === 'today' || chartType === '5day') && timelineData && (
            <div className="timeline-wrapper">
              <TimelineChart 
                data={{
                  time: timelineData.time,
                  price: timelineData.price,
                  volume: timelineData.volume,
                  avgPrice: timelineData.price, // 使用price作为平均价
                  preClose: timelineData.preClose
                }}
                height={height} /* 使用完整高度 */
                isFiveDay={chartType === '5day'} // 作为独立属性传递
              />
            </div>
          )}
          {(chartType === 'day' || chartType === 'week' || chartType === 'month') && (
            <CandlestickChart 
              data={candlestickData}
              dates={candlestickDates}
              height={height}
              showMacd={false}
              title={
                chartType === 'day' ? '日K线' : 
                chartType === 'week' ? '周K线' : '月K线'
              }
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default MarketChart;